import React, { Component } from "react";
import Api from "../../../config/api";
import axios from "axios";

import styles from "./sass/send-message.scss";

import Button from "antd/lib/button";

import Input from "antd/lib/input";
import Form from "antd/lib/form";
import Select from "antd/lib/select";
import message from "antd/lib/message";

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

class sendMsg extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allAccount: [],
      loading: false
    };
  }
  componentWillMount() {
    this.getSelect();
  }
  getSelect() {
    axios
      .post(Api["getAllUserAccount"])
      .then(res => {
        if (res) {
          let data = JSON.parse(JSON.stringify(res.data));
          this.setState(
            {
              allAccount: data
            },
            () => {
              this.initSelect();
            }
          );
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
  initSelect() {
    this.props.form.setFieldsValue({
      account: this.state.allAccount[0]
    });
  }
  sendMessage(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let data = JSON.parse(JSON.stringify(values));
        this.setState({
          loading: true
        });
        axios
          .post(Api["sendMessage"], data)
          .then(res => {
            if (res) {
              this.props.form.resetFields(["phones", "content"]);
              message.success("提交成功");
              this.setState({
                loading: false
              });
            } else {
              this.setState({
                loading: false
              });
            }
          })
          .catch(function(error) {
            console.log(error);
            this.setState({
              loading: false
            });
          });
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      }
    };
    return (
      <Form className={styles["form-box"]}>
        <FormItem label="账号" {...formItemLayout}>
          {getFieldDecorator("account", {
            validateFirst: true,
            rules: [{ required: true, message: "必选" }]
          })(
            <Select style={{ width: 150 }}>
              {this.state.allAccount.map((item, index) => {
                return (
                  <Option key={index} value={item}>
                    {item}
                  </Option>
                );
              })}
            </Select>
          )}
        </FormItem>
        <FormItem label="号码" {...formItemLayout}>
          {getFieldDecorator("phones", {
            validateFirst: true,
            rules: [{ required: true, message: "必填" }]
          })(<TextArea rows="4" placeholder="多个号码以英文逗号分隔" />)}
        </FormItem>
        <FormItem label="内容" {...formItemLayout}>
          {getFieldDecorator("content", {
            validateFirst: true,
            rules: [{ required: true, message: "必填" }]
          })(<TextArea rows="6" placeholder="请输入内容" />)}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            onClick={this.sendMessage.bind(this)}
            className={styles["submit-btn"]}
            disabled={this.state.loading}
          >
            发送短信
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const ValidateForm = Form.create()(sendMsg);

export default ValidateForm;
